<template>
	<rh-wx class="hd-paysuccess-container">
		<view class="icon-content flex-center">
			<u-icon name="checkmark-circle-fill" color="#22c134" size="150"></u-icon>
		</view>
		<view class="pay-success-content">
			<view class="pay-info">
				<text class="info-txt">订单支付成功，请至“我的”查看卡券详情</text>
				<text class="share-txt" v-if="activeInfo.whetherToShare"> ，您还可以：</text>
			</view>
			<view class="share-info" v-if="activeInfo.whetherToShare">
				分享链接，获取{{activeInfo.completeIncome}}元现金返还；
			</view>
		</view>
		<view class="invite-content">
			<view class="url-input ellipsis-1">
				{{invite.url}}
			</view>
			<view class="btn-content flex-between">
				<text class="btn-txt" @click="copy(invite.url)">复制分享链接</text>
				<text class="btn-txt">保存海报</text>
			</view>
			<view class="warning-desc flex-normal">
				分享成功后请关注 <text class="desc-txt">爱车多多</text> 公众号查看余额
			</view>
		</view>
	</rh-wx>
</template>

<script>
	import {makeCover, getActiveInfo} from '@/api/hd/index.js'
	export default {
		data() {
			return {
				activeInfo: {},
				invite: {}
			}
		},
		onLoad() {				
			this.showWxApp()
		},
		mounted() {
			this.getPoster()
			this.getActiveInfo()
		},
		methods: {			
			getPoster(){
				let _self = this, {a} = this.$route.query
				if(!a) return
				makeCover(a).then(res => {
					_self.invite = res.data
				})
			},
			async getActiveInfo(){
				let _self = this, isSuccess = false, {a} = this.$route['query']
				if(!a) return isSuccess
				await getActiveInfo(a).then(res => {
					_self.activeInfo = res.data
					isSuccess = true
				})
				return isSuccess
			},
			copy(val){
				let _self = this
				uni.setClipboardData({
					data: val, //	这里是个坑接受字符串类型 value转化为字符串
					success: function () {
						_self.$attention.noIcon('复制成功')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
	@mixin fontStyle($color, $size, $weight: 500) {
		color: $color;
		font-size: $size;
		font-weight: $weight;
	}
	.hd-paysuccess-container{
		background-color: #fff;
		min-height: 100vh;		
		.warning-desc{
			margin-top: 50rpx;
			@include fontStyle(#999, 24rpx);
			.desc-txt{
				padding: 0 10rpx;
				@include fontStyle(#0003AA, 24rpx);
			}
		}
		.icon-content{
			padding-top: 50rpx;
		}
		.pay-success-content{
			margin-top: 50rpx;
			padding: 0 80rpx;
			.pay-info{
				text-align: justify;
				line-height: 1.6;
				@include fontStyle(#3D3D3D, 26rpx);
			}
			.share-info{
				margin-top: 60rpx;
				@include fontStyle(#D10909, 26rpx);
			}
		}
		.invite-content{
			margin-top: 30rpx;
			padding: 0 80rpx;
			.url-input{
				background: rgba(237, 237, 237, 0.4);
				padding: 20rpx 10rpx;
				border-radius: 10rpx;
				width: 100%;
				@include fontStyle(#3D3D3D, 26rpx);
			}
			.btn-content{
				margin-top: 30rpx;
				.btn-txt{
					@include fontStyle(#0003AA, 26rpx);
				}
			}
		}
  }
</style>

